<template>
  <div class="content-info">
    <LabelTitle text="事件趋势分析" :showImg="false"></LabelTitle>
    <div class="content-box mt10">
      <lineEcharts titleName="" :options="pieData"></lineEcharts>
    </div>
  </div>
</template>

<script setup>
import LabelTitle from "@/components/labeltitle.vue";
import { onMounted } from "vue";
import lineEcharts from "../line.vue";
const props = defineProps({
  allData: Object,
});
let pieData = ref([]);

const getData = async () => {
  try {
    let data = [];
    props.allData.trendList.forEach((item) => {
      data.push({
        xaxis: item.date,
        num: item.count,
      });
    });
    // let data = [
    //   {
    //     num: 142,
    //     xaxis: "1月",
    //   },
    //   {
    //     num: 122,
    //     xaxis: "2月",
    //   },
    //   {
    //     num: 132,
    //     xaxis: "3月",
    //   },
    //   {
    //     num: 122,
    //     xaxis: "4月",
    //   },
    //   {
    //     num: 112,
    //     xaxis: "5月",
    //   },
    //   {
    //     num: 162,
    //     xaxis: "6月",
    //   },
    //   {
    //     num: 142,
    //     xaxis: "7月",
    //   },
    //   {
    //     num: 122,
    //     xaxis: "8月",
    //   },
    //   {
    //     num: 124,
    //     xaxis: "9月",
    //   },
    //   {
    //     num: 122,
    //     xaxis: "10月",
    //   },
    //   {
    //     num: 112,
    //     xaxis: "11月",
    //   },
    //   {
    //     num: 122,
    //     xaxis: "12月",
    //   },
    // ];
    let xAxis = [];
    let ys = [];
    data.forEach((element) => {
      xAxis.push(element.xaxis);
      ys.push(element.num);
    });
    pieData.value = {
      xAxis,
      ys,
    };
  } catch (e) {
    console.log("error:", e);
  }
};

watch(
  () => props.allData,
  (newval) => {
    getData();
  },
  {
    deep: true,
    // immediate: true,
  }
);
onMounted(() => {
  // getData();
});
</script>

<style lang="scss" scoped>
.content-info {
  width: 33%;
  // height: 250px;
  .content-box {
    height: 250px;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(70, 102, 149, 0.06);
    border-radius: 12px;
    padding: 20px;
  }
}
</style>
